<template>
  <div>

  <div class="block">
    <span class="demonstration" style="margin-right: 10px">筛选</span>
    <el-select v-model="value" placeholder="请选择查询类型:">
      <el-option
          v-for="item in leixing"
          :key="item.typeId"
          :label="item.name"
          :value="item.typeId"
          :disabled="item.disabled">
      </el-option>
    </el-select>

    <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
    </el-date-picker>
    <el-button type="primary" style="margin-left: 10px" @click="bytime">查询</el-button>
    <el-button type="primary" style="margin-left: 10px" @click="chongzhi" >重置</el-button>
    <el-button type="primary" style="margin-left: 10px" @click="dialogFormVisible = true" >添加账单</el-button>
    <el-dialog title="添加账单" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="账单名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账单类型" :label-width="formLabelWidth">
          <el-select v-model="form.typeId" placeholder="请选择活动区域">
            <el-option
                v-for="item in leixing"
                :key="item.typeId"
                :label="item.name"
                :value="item.typeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账单价格" :label-width="formLabelWidth">
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sentdata">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <div class="about">

    <table>
      <thead>
      <tr>
        <th>序号</th>
        <th>消费名称</th>
        <th>消费类型</th>
        <th>消费金额</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(l, index) in paginatedData" :key="l.info_id">
        <td>{{ l.infoId }}</td>
        <td>{{ l.name }}</td>
        <td>{{ typeIdToNameMap[l.typeId] }}</td>
        <!-- 使用 v-if 和 v-else 切换显示内容与输入框 -->
        <td>
          <span v-if="!l.editable">{{ l.money }}元</span>
          <input type="number" v-model="l.money" v-else @blur="saveChanges(l, index)" >
        </td>
        <td>
          <el-button type="primary" icon="el-icon-edit" circle @click="editRow(l)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="deleteRow(l)"></el-button>
          <!-- 添加保存按钮 -->
          <el-button type="success" icon="el-icon-check" circle v-if="l.editable" @click="saveChanges(l, index)"></el-button>
        </td>
      </tr>
      </tbody>
    </table>
    <el-pagination
        background
        layout="total, prev, pager, next"
        :total="totalItems"
        :current-page="currentPage"
        :page-size="pageSize"
        @current-change="handleCurrentChange"
    />
  </div>
    <router-link to="/static">统计分析</router-link>
    <div><p>友情链接:<a href="http://39.107.54.234/" style="margin-left: 20px">陈浩</a> <a href="http://123.56.93.217/" style="margin-left: 20px">夏傲翔</a></p></div>
  </div>
</template>


<script>
function formatDate(date) {
  console.log(date)
  var d = new Date(date),
      month = '' + (d.getMonth() + 1),
      day = '' + d.getDate(),
      year = d.getFullYear();

  if (month.length < 2)
    month = '0' + month;
  if (day.length < 2)
    day = '0' + day;

  return [year, month, day].join('-');
}
import axios from "axios";
let url = 'https://youxuan-zua-api.tulan.wang/admin/ysf-bill-info/findPage?page=1&size=20'
export default {
data(){
  return{

    value: '',
    list :[],
    currentPage: 1, // 当前页数
    pageSize: 3, // 每页显示的条目数量
    totalItems: 0, // 数据总条数
    leixing : [],
    value1: ' ',
    url1 : '',
    temp :[],
    dialogFormVisible: false,
    form: {
      name: '',
      typeId: '',
      money : '',



    },
    dialogTableVisible: false,
    formLabelWidth: '120px',

  }

},
mounted() {
  this.loadAll();


},
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.list.slice(start, end);
    },
    typeIdToNameMap() {
      const map = {};
      this.leixing.forEach(item => {
        map[item.typeId] = item.name;
      });
      return map;
    },
  },
  methods: {
    loadAll(){
      axios.get(url).then(res => {
        let result = res.data;
        this.list =null;
        this.list = result.data;
        this.totalItems = result.recordsTotal;
      })
      let url3 = 'https://youxuan-zua-api.tulan.wang/admin/ysf-bill-type/page'
      axios.get(url3).then(res1=>{
        let r= res1.data;

        this.leixing=r.data


      })
    },
    sentdata(){
      this.dialogFormVisible = false;
      axios.post('https://youxuan-zua-api.tulan.wang/admin/ysf-bill-info/add',this.form).then(re=>{
        if(re.data.status === 0){
          alert("添加成功！")
          this.loadAll()
        }else {
          alert("添加失败！")
        }
      })


    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    bytime(){
      const param = {
        'typeId':'',
        'startTime' : formatDate(this.value1[0]),
        'endTime': formatDate(this.value1[1])
      }
      this.url1 =  'https://youxuan-zua-api.tulan.wang/admin/ysf-bill-info/findByTime?typeId='+this.value + '&startTime=' + formatDate(this.value1[0]) + '&endTime=' + formatDate(this.value1[1])

      if(param.startTime=="NaN-NaN-NaN"){
        this.url1 = 'https://youxuan-zua-api.tulan.wang/admin/ysf-bill-info/findByTime?typeId='+this.value
      }
      axios.get(this.url1).then(res => {
        let result = res.data;
        this.list=null
        this.list=result.data
        this.totalItems =result.data.length
        console.log(result)

      })

    },
    chongzhi(){
      this.value1 = '';

      this.value = '';
      this.loadAll();

     },
    editRow(row) {
      // 设置 row 的 editable 属性为 true
      this.$set(row, 'editable', true);
    },
    deleteRow(row) {
      axios.get('https://youxuan-zua-api.tulan.wang/admin/ysf-bill-info/delete?id='+row.infoId).then(res=>{
        this.currentPage = 1;
        this.loadAll();
      })
      // 处理删除逻辑
      // 注意，这里只是示例，你需要根据实际情况实现删除逻辑
    },
    saveChanges(row, index) {
      // 保存更改，然后将 editable 设为 false
      const param ={
        "infoId": row.infoId,
        "money": row.money

      }
      console.log(row);
      axios.post('https://youxuan-zua-api.tulan.wang/admin/ysf-bill-info/update',param).then(res=>{
        console.log('1')
        this.loadAll();
      })

      row.editable = false;

      // 可能需要在这里发送一个 AJAX 请求更新服务器端数据
    },

  },



}
</script>
<style>
table{
  width: 100%;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc; /* 添加边框 */
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2; /* 可选：给表头添加背景色 */
}
</style>